<template>
  <div class="wrapper">
    <parallax
      class="section page-header header-filter"
      :style="headerStyle"
    ></parallax>
    <div class="main main-raised">
      <div class="section profile-content">
        <div class="container">
          <div class="md-layout">
            <div class="md-layout-item md-size-50 mx-auto">
              <div class="profile">
                <div class="avatar">
                  <img
                    :src="img"
                    alt="Circle Image"
                    class="img-raised rounded-circle img-fluid"
                  />
                </div>
                <div class="name">
                  <h3 class="title">张少贺</h3>
                  <table >
                    <tr>
                      <td>
                        <h6 align="right">综合评分:</h6>
                      </td>
                      <td>
                        <el-rate
                          v-model="value"
                          disabled
                          show-score
                          text-color="#ff9900"
                          score-template="{value}"
                        >
                        </el-rate>
                      </td>
                    </tr>
                    <tr>
                      <td></td>
                    </tr>
                  </table>

                  <!-- <h6>教师职业、Java讲师、项目经理</h6> -->

                  <div class="md-layout-item md-size-500 md-xsmall-size-100">
                    <!-- <badge type="default">教师职业</badge> -->
                    <badge type="primary">项目经理</badge>
                    <badge type="info">指导老师</badge>
                    <badge type="success">讲师</badge>
                    <badge type="warning">Warning</badge>
                    <!-- <badge type="danger">Danger</badge>
                    <badge type="rose">Rose</badge> -->
                  </div>
                  <div class="description text-center">
                    <p>
                      An artist of considerable range, Chet Faker — the name
                      taken by Melbourne-raised, Brooklyn-based Nick Murphy —
                      writes, performs and records all of his own music, giving
                      it a warm, intimate feel with a solid groove
                      structure.开了个环境度搜个和奇偶ID方式仅供个积极功夫就偶是结构你急哦；
                    </p>
                  </div>
                  <!-- <md-button href="javascript:void(0)" class="md-just-icon md-simple md-pinterest">
										<i class="el-icon-s-promotion"></i>
									</md-button>
									<md-button href="javascript:void(0)" class="md-just-icon md-simple md-pinterest">
										<i class="el-icon-s-comment"></i>
									</md-button>
									<md-button href="javascript:void(0)" class="md-just-icon md-simple md-dribbble"><i
											class="fab fa-dribbble"></i></md-button>
									<md-button href="javascript:void(0)" class="md-just-icon md-simple md-twitter"><i
											class="fab fa-twitter"></i></md-button>
									<md-button href="javascript:void(0)" class="md-just-icon md-simple md-pinterest">
										<i class="fab fa-pinterest"></i>
									</md-button>
									<md-button href="javascript:void(0)" class="md-just-icon md-simple md-pinterest">
										<i class="fa-comment"></i>
										<i class="el-icon-delete-solid"></i>
										<i class="el-icon-s-flag"></i>
									</md-button> -->
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="description text-center">
						<p>
							An artist of considerable range, Chet Faker — the name taken by
							Melbourne-raised, Brooklyn-based Nick Murphy — writes, performs
							and records all of his own music, giving it a warm, intimate feel
							with a solid groove structure.
						</p>
					</div> -->
          <div class="profile-tabs">
            <tabs
              :tab-name="['详细信息', '回复留言', '咨询']"
              :tab-icon="['person', 'camera', 'comment']"
              plain
              nav-pills-icons
              color-button="success"
            >
              <!-- here you can add your content for tab-content -->

              <template slot="tab-pane-1">
                <!-- <div class="md-layout"  style="padding-left: 145px;"> -->
                <div class="md-layout" style="padding-right: 600px;">
                  <!-- <el-card class="box-card" shadow="hover"> -->
                  <div class="md-layout-item md-size-50 mx-auto">
                    <div class="name">
                      <!-- <el-card class="box-card" shadow="always"> -->
                      <el-card class="box-card" shadow="hover">
                        <h4 class="description text-center">个人数据</h4>
                        <table class="description text-center">
                          <tr>
                            <td>专业度:</td>
                            <td>
                              <el-rate
                                v-model="value1"
                                disabled
                                show-score
                                text-color="#6f599c"
                                score-template="{value}"
                              >
                              </el-rate>
                            </td>
                          </tr>
                          <tr>
                            <td>服务:</td>
                            <td>
                              <el-rate
                                v-model="value2"
                                disabled
                                show-score
                                text-color="#00ae9d"
                                score-template="{value}"
                              >
                              </el-rate>
                            </td>
                          </tr>
                          <tr>
                            <td>回复率:</td>
                            <td>
                              <el-rate
                                v-model="value3"
                                disabled
                                show-score
                                text-color="#f391a9"
                                score-template="{value}"
                              >
                              </el-rate>
                            </td>
                          </tr>
                        </table>
                      </el-card>
                      <el-card
                        class="box-card"
                        shadow="hover"
                        style="margin-top: 20px;"
                      >
                        <h4 class="description text-center">详细简介</h4>
                        <div class="description text-center">
                          <p>
                            An artist of considerable range, Chet Faker — the
                            name taken by Melbourne-raised, Brooklyn-based Nick
                            Murphy — writes, performs and records all of his own
                            music, giving it a warm, intimate feel with a solid
                            groove
                            structure.开了个环境度搜个和奇偶ID方式仅供个积极功夫就偶是结构你急哦；
                          </p>
                        </div>
                      </el-card>
                      <el-card
                        class="box-card"
                        shadow="hover"
                        style="margin-top: 20px;"
                      >
                        <table class="description text-center">
                          <tr>
                            <td>
                              <md-icon>email</md-icon>
                            </td>
                            <td>
                              805414400@qq.com
                            </td>
                          </tr>
                          <tr>
                            <td>
                              <md-icon>phone</md-icon>
                            </td>
                            <td>
                              15632424507
                            </td>
                          </tr>
                          <tr>
                            <td>
                              <md-icon>location_on</md-icon>
                            </td>
                            <td>
                              7楼706办公室33工位
                            </td>
                          </tr>
                        </table>
                      </el-card>
                    </div>
                  </div>
                  <!-- </el-card> -->
                </div>
              </template>
			  
              <template slot="tab-pane-2">
                <div class="md-layout" style="padding-left: 145px;">
                  <Comment></Comment>
                </div>
              </template>
			  
              <template slot="tab-pane-3">
                <div class="md-layout" style="padding-left: 145px;">
                  <el-card class="box-card01" shadow="hover">
					<Chat></Chat>
                  </el-card>
                </div>
              </template>
			  
            </tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Tabs } from "@/components";
import { Badge } from "@/components";
import Comment from "../components/Comment.vue";
import Chat from "../components/Chat.vue";
export default {
  components: {
    Tabs,
    Badge,
    Comment,
	Chat
  },
  bodyClass: "profile-page",
  data() {
    return {
      teacher: {},
      user: {},
      value: 3.6,
      value1: 4.5,
      value2: 3.2,
      value3: 2.7,
      tabPane1: [
        {
          image: require("@/assets/img/examples/studio-1.jpg")
        },
        {
          image: require("@/assets/img/examples/studio-2.jpg")
        },
        {
          image: require("@/assets/img/examples/studio-4.jpg")
        },
        {
          image: require("@/assets/img/examples/studio-5.jpg")
        }
      ],
      tabPane2: [
        {
          image: require("@/assets/img/examples/olu-eletu.jpg")
        },
        {
          image: require("@/assets/img/examples/clem-onojeghuo.jpg")
        },
        {
          image: require("@/assets/img/examples/cynthia-del-rio.jpg")
        },
        {
          image: require("@/assets/img/examples/mariya-georgieva.jpg")
        },
        {
          image: require("@/assets/img/examples/clem-onojegaw.jpg")
        }
      ],
      tabPane3: [
        {
          image: require("@/assets/img/examples/mariya-georgieva.jpg")
        },
        {
          image: require("@/assets/img/examples/studio-3.jpg")
        },
        {
          image: require("@/assets/img/examples/clem-onojeghuo.jpg")
        },
        {
          image: require("@/assets/img/examples/olu-eletu.jpg")
        },
        {
          image: require("@/assets/img/examples/studio-1.jpg")
        }
      ]
    };
  },
  props: {
    header: {
      type: String,
      default: require("@/assets/img/city-profile.jpg")
    },
    img: {
      type: String,
      default: require("@/assets/img/faces/christian.jpg")
    }
  },
  computed: {
    headerStyle() {
      return {
        backgroundImage: `url(${this.header})`
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.section {
  padding: 0;
}

.profile-tabs::v-deep {
  .md-card-tabs .md-list {
    justify-content: center;
  }

  [class*="tab-pane-"] {
    margin-top: 3.213rem;
    padding-bottom: 50px;

    img {
      margin-bottom: 2.142rem;
    }
  }
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

/* 卡片样式 */
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 840px;
  // height: 1000px;
}
.box-card01 {
  width: 890px;
  height: 500px;
}
.table02 {
	     width: 60%;
	     table-layout: fixed;
	   	 
	     th {
	       text-align: center;
	     }
	   }
table {
	     width: 60%;
	     table-layout: fixed;
		 margin: 10px 330px 10px 60px;
		
	     th {
	       text-align: center;
	     }
	   }
</style>
